<template>
  <view class="page_form_wrap">
    <view class="title_wrap">基本信息</view>
    <view class="content_wrap">
      <view class="item_wrap">
        <view class="label_wrap">货源名称</view>
        <view class="value_wrap">
          {{detail.goodsSourceName}}
        </view>
      </view>
      <view class="item_wrap">
        <view class="label_wrap">装货地</view>
        <view class="value_wrap">
          {{detail.loadingPlaceName || ''}}
        </view>
      </view>
      <view class="item_wrap">
        <view class="label_wrap">卸货地</view>
        <view class="value_wrap">
          {{detail.unloadingPlaceName || ''}}
        </view>
      </view>
      <view class="item_wrap">
        <view class="label_wrap">产品</view>
        <view class="value_wrap">
          {{detail.productName || ''}}
        </view>
      </view>
      <view class="item_wrap">
        <view class="label_wrap">开始时间</view>
        <view class="value_wrap">
          {{detail.startTime || ''}}
        </view>
      </view>
      <view class="item_wrap">
        <view class="label_wrap">结束时间</view>
        <view class="value_wrap">
          {{detail.endTime || ''}}
        </view>
      </view>
    </view>
    <view class="title_wrap">运输信息</view>
    <view class="content_wrap">
      <view class="item_wrap">
        <view class="label_wrap">运价</view>
        <view class="value_wrap">
          <view>{{detail.freight}}</view>
        </view>
      </view>
      <view class="item_wrap">
        <view class="label_wrap">结算依据</view>
        <view class="value_wrap">
          <view>{{settlementText(detail.settlementBasis)}}</view>
        </view>
      </view>
      <view class="item_wrap">
        <view class="label_wrap">是否计算路损</view>
        <view class="value_wrap">
          <view>{{isCalcRoadLossText(detail.isCalculateRoadLoss)}}</view>
        </view>
      </view>
      <view v-if="detail.isCalculateRoadLoss===0" class="item_wrap">
        <view class="label_wrap">合理路损</view>
        <view class="value_wrap">
          {{detail.reasonableRoadLoss}}吨
        </view>
      </view>
      <view v-if="detail.isCalculateRoadLoss===0" class="item_wrap">
        <view class="label_wrap">路损单价</view>
        <view class="value_wrap">
          {{detail.roadLossPrice}}元/吨
        </view>
      </view>
      <view v-if="detail.isCalculateRoadLoss===0" class="item_wrap">
        <view class="label_wrap">路损计算规则</view>
        <view class="value_wrap">
          <view>{{calcRuleText(detail.roadLossCalculateRule)}}</view>
        </view>
      </view>
      <view class="item_wrap">
        <view class="label_wrap">抹零规则</view>
        <view class="value_wrap">
          <view>{{erasureRuleText(detail.erasureRule)}}</view>
        </view>
      </view>
      <view class="item_wrap">
        <view class="label_wrap">备注</view>
        <view class="value_wrap">
          {{detail.remark || ''}}
        </view>
      </view>
    </view>
    <view class="footer_wrap">
      <button class="out-button" type="primary" plain @click.stop="openCallBook">电话咨询</button>
    </view>
  </view>
</template>

<script>
  import config from '@/config';
  import { toast } from '@/utils/common';
  import { getDictDatas } from '@/api/me.js';
  import { getGoodsSource } from '@/api/system/goodsSource.js'
  export default {
    data() {
      return {
        detail: {},
        phoneNum: undefined,
        settlementList: [],
        isCalcRoadLossList: [],
        calcRuleList: [],
        erasureRuleList: []
      };
    },
    computed: {
      settlementText() {
        return (value) => {
          return this.settlementList.find(e => e.value === value?.toString())?.label || ''
        }
      },
      isCalcRoadLossText() {
        return (value) => {
          return this.isCalcRoadLossList.find(e => e.value === value?.toString())?.label || ''
        }
      },
      calcRuleText() {
        return (value) => {
          return this.calcRuleList.find(e => e.value === value?.toString())?.label || ''
        }
      },
      erasureRuleText() {
        return (value) => {
          return this.erasureRuleList.find(e => e.value === value?.toString())?.label || ''
        }
      }
    },
    onLoad(options) {
      const id = options.id
      this.getDictDatas()
      this.getGoodsSource(id)
    },
    methods: {
      async getGoodsSource(id) {
        const res = await getGoodsSource({ id })
        if (res.code === 0) {
          this.detail = res.data || {}
        } else {
          toast(res.msg)
        }
      },
      openCallBook() {
        uni.makePhoneCall({
          phoneNumber: this.phoneNum
        });
      },
      async getDictDatas() {
        const res = await getDictDatas();
        if (res.code === 0) {
          this.settlementList = res.data.filter(
            (e) => e.dictType === 'settlement_basis'
          );
          this.isCalcRoadLossList = res.data.filter(
            (e) => e.dictType === 'is_calculate_road_loss'
          );
          this.calcRuleList = res.data.filter(
            (e) => e.dictType === 'road_loss_calculate_rule'
          );
          this.erasureRuleList = res.data.filter(
            (e) => e.dictType === 'erasure_rule'
          );
          this.phoneNum = (res.data || []).filter(
            (e) => e.dictType === 'contact_number'
          )[0]?.label;
        }
      },
    }
  };
</script>
<style lang="scss" scoped>
  @import "@/static/scss/custom_form.scss";

  .label_wrap {
    color: #999999;
  }

  .footer_wrap {
    display: flex;

    button {
      flex: 1;
    }

    button+button {
      margin-left: 20rpx;
    }
  }
</style>